<template>
  <div id="nature"></div>
</template>

<script>
import { findDictByCode } from '../../../api/index';
import { selectnatures } from '../../../api/dataCenter';
export default {
  name: 'nature',
  data () {
    return {
      data: [],
      name: []
    };
  },
  methods: {
    drawLine () {
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById('nature'));
      // 绘制图表
      myChart.setOption({
        tooltip: { trigger: 'item', formatter: '{b} : {c}' },
        legend: {
          type: 'scroll',
          top: 15,
          right: 10,
          width: 250,
          pageButtonPosition: 'end',
          textStyle: {
            color: '#fff'
          },
          data: this.name,
          pageTextStyle: {
            color: '#fff'
          }
        },
        series: [
          {
            type: 'pie',
            radius: ['50%', '70%'],
            avoidLabelOverlap: true,
            minAngle: 3,
            startAngle: 10,
            left: 150,
            top: 40,
            width: 200,
            height: 200,
            selectedMode: 'single',
            label: {
              formatter: '{c}',
              color: '#fff'
            },
            labelLine: {
              show: true,
              length: 10
            },
            data: this.data,
            emphasis: {
              label: {
                show: true,
                fontSize: '30',
                fontWeight: 'bold'
              }
            }
          }
        ]
      });
    }
  },
  mounted () {
    let obj = {};
    findDictByCode('company_nature')
      .then(data => {
        console.log(data);
        if (data.success) {
          data.data.forEach(item => {
            obj[item.name] = item.val;
          });
          console.log(obj);
          // obj['未知'] = 0;
          return selectnatures();
        }
      })
      .then(data => {
        console.log(data);
        if (data.success) {
          this.data = Object.keys(obj).map(val => {
            let dataItem = { name: val };
            dataItem.value = data.data.find(item => {
              // if (item.nature === null) {
              //     return obj[val] === 0;
              // } else {
              return obj[val] === item.nature;
              // }
            }).natureCount;
            return dataItem;
          });
          this.name = Object.keys(obj);
          console.log(this.data);
          this.drawLine();
        }
      });
  }
};
</script>

<style scoped>
#nature {
    width: 500px;
    height: 242px;
    border: 1px dashed rgb(54, 164, 180, 0.6);
    border-radius: 5px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -o-box-sizing: border-box;
    background: url('../../../assets/img/nature.png') no-repeat;
    background-size: cover;
    color: rgba(255, 255, 255, 1);
}
</style>